<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta content="text/html;charset=UTF-8"/>
    <title th:text="${title}"></title>
    <div th:replace="fragments/header :: css"></div>
    <div th:replace="fragments/header :: js"></div>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="fragments/sider :: sider"></div>
        <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
            <h1 th:text="${title}"></h1>
            <div id="main" style="width: 900px;height:400px;"></div>
        </main>
    </div>
</div>
<script th:inline="javascript">
    //<![CDATA[
    //上面的注释别删，删了就跑不了了
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 新建sale与dates数组来接受数据
    var sale= [];
    var nation=[];

    //AJAX接收数据主体
    $.ajax({
        type:"GET",
        url:"/test24",
        dataType:"json",
        async:false,
        success:function (result) {


            for (var i = 0; i < result.length; i++){
                var k=nation.push(result[i].nation);
                var j=sale.push(result[i].salenumber);
            }

        },
        error :function(errorMsg) {
            alert("获取后台数据失败！");
        }
    });

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '销售额'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            //结合
            name:"车系",
            data: nation
        },
        tooltip : {
            trigger : 'axis',
            axisPointer : {
                type : 'cross',
                crossStyle : {
                    color : 'red'
                },
                lineStyle : {
                    color : 'red'
                }
            }
        },

        yAxis: {},
        toolbox : {
            emphasis : {},
            show : true,
            showTitle : true,
            feature : {
                saveAsImage : {},// 保存为图片
                restore : {},// 还原
                dataView : {},// 数据视图
                magicType : {
                    type : ['line', 'bar']
                },
                // 数据缩放
                dataZoom : {}
            }
        },
        series: [{
            name: '销量',
            type: 'bar',
            //结合
            data: sale
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //]]>
</script>

</body>
</html>